<template>
  <div class="app-container" style="height: 100%">
    <div
      v-loading="loading"
      class="app-container-inner"
      style="display: flex; flex-direction: column"
      element-loading-text="加载中..."
    >
      <div class="header flex-justify-end">
        <div class="search">
          <!--日期范围-->
          <DateRange ref="dateRangeRef" class="date-range" @change="handleDateChange" />

          <!--退回状态-->
          <el-select
            v-model="data.status"
            placeholder="退回状态"
            filterable
            clearable
            class="status"
            @change="getList"
          >
            <el-option
              v-for="item in option"
              :key="item.value"
              :value="item.value"
              :label="item.name"
            />
          </el-select>

          <!--物料单号-->
          <el-input
            v-model.trim="data.workSpareNo"
            clearable
            placeholder="物料单号"
            class="work-spare-no"
            @keyup.enter.native="getList"
            @clear="getList"
          />

          <!--工单单号-->
          <el-input
            v-model.trim="data.workNo"
            clearable
            placeholder="工单单号"
            class="work-no"
            @keyup.enter.native="getList"
            @clear="getList"
          />

          <!--旧件单号-->
          <el-input
            v-model.trim="data.oldSpareNo"
            clearable
            placeholder="旧件单号"
            class="old-spare-no"
            @keyup.enter.native="getList"
            @clear="getList"
          />

          <!--部门-->
          <el-select
            v-model="data.networkId"
            placeholder="部门"
            filterable
            clearable
            class="network-id"
            @change="getList"
          >
            <el-option v-for="item in options" :key="item.value" :value="item.value" />
          </el-select>

          <!--按钮组-->
          <div class="btn-group">
            <button class="search-btn btn-bg1" @click="getList">
              <el-icon>
                <Search />
              </el-icon>
              <span>搜索</span>
            </button>
            <button class="reset-btn btn-bg5" @click="onReset">
              <el-icon>
                <RefreshRight />
              </el-icon>
              <span>重置</span>
            </button>
          </div>
        </div>
      </div>
      <div class="table-list" style="flex: 1; position: relative">
        <el-table
          :border="true"
          stripe
          resizable
          :data="tableData"
          height="100%"
          style="position: absolute"
        >
          <template #empty>
            <el-empty description="暂无数据" />
          </template>
          <!--序号-->
          <el-table-column show-overflow-tooltip label="序号" fixed="left" width="50">
            <template #default="i">
              {{ i.$index + 1 }}
            </template>
          </el-table-column>

          <!--退回编号-->
          <el-table-column
            show-overflow-tooltip
            prop="oldSpareNo"
            label="退回编号"
            min-width="200"
          />

          <!--工单编号-->
          <el-table-column show-overflow-tooltip prop="date" label="工单编号" min-width="200" />

          <!--状态-->
          <el-table-column show-overflow-tooltip label="状态" width="144">
            <template #default="scope">
              <el-tag v-if="scope.row.status == 1" class="ml-2" type="warning">待退回</el-tag>
              <el-tag v-if="scope.row.status == 2" type="warning">待确认并填写物流</el-tag>
              <el-tag v-if="scope.row.status == 3">已退回</el-tag>
            </template>
          </el-table-column>

          <!--退回仓库-->
          <el-table-column show-overflow-tooltip prop="store" label="退回仓库" min-width="140" />

          <!--部门-->
          <el-table-column show-overflow-tooltip prop="network" label="部门" min-width="140" />

          <!--客户名称-->
          <el-table-column
            show-overflow-tooltip
            prop="receiptName"
            label="客户名称"
            min-width="100"
          />

          <!--电话-->
          <el-table-column show-overflow-tooltip prop="receiptPhone" label="电话" width="110" />

          <!--地址-->
          <el-table-column show-overflow-tooltip label="地址" min-width="150">
            <template #default="i">
              <span>{{
                i.row.receiptProvince +
                ' ' +
                i.row.receiptCity +
                ' ' +
                i.row.receiptArea +
                ' ' +
                i.row.receiptTown +
                ' ' +
                i.row.receiptAddress
              }}</span>
            </template>
          </el-table-column>

          <!--最后更新时间-->
          <el-table-column
            show-overflow-tooltip
            prop="updateTime"
            label="最后更新时间"
            width="128"
          />
          <!-- <el-table-column show-overflow-tooltip fixed="right" label="操作" width="100">
            <template #default="scope">
              <div class="btns">
                <button class="btn-table bgColor1" @click="goOrder(scope.$index)">工单</button>
                <button class="btn-table bgColor2" @click="viewDetail(scope.$index)">详细</button>
              </div>
            </template>
          </el-table-column> -->
        </el-table>
      </div>

      <!--页码-->
      <div class="footer">
        <Pagination
          ref="pagination"
          :list_total="totalList"
          @size-change="getList"
          @current-change="getList"
        />
      </div>

      <!-- 查看详细弹出框 -->
      <el-dialog
        v-model="detailDialog"
        :draggable="true"
        :destroy-on-close="true"
        title="旧件退回信息"
        width="900px"
        top="3vh"
        class="detail-dialog"
      >
        <div class="tables">
          <table class="table-j">
            <colgroup>
              <col width="90" />
              <col />
              <col width="90" />
              <col />
              <col width="90" />
              <col />
            </colgroup>
            <tbody>
              <tr>
                <td class="bg-gray"><b>退回编号</b></td>
                <td>123123123123</td>
                <td class="bg-gray"><b>申请部门</b></td>
                <td>日日顺</td>
                <td class="bg-gray"><b>申请时间</b></td>
                <td>2015-15-15 15:15:15</td>
              </tr>
              <tr>
                <td class="bg-gray"><b>工单编号</b></td>
                <td><a class="text-blue">123123123123</a></td>
                <td class="bg-gray"><b>审批人员</b></td>
                <td>客服：张三</td>
                <td class="bg-gray"><b>审批时间</b></td>
                <td>2015-15-15 15:15:15</td>
              </tr>
              <tr>
                <td class="bg-gray"><b>当前状态</b></td>
                <td>已完成</td>
                <td class="bg-gray"><b>申请类型</b></td>
                <td>厂家物料</td>
                <td class="bg-gray"><b>旧件处理</b></td>
                <td>寄回</td>
              </tr>
            </tbody>
          </table>
          <div class="table-detail">
            <el-table border stripe resizable size="default" :data="tableData2" style="width: 100%">
              <!--退回仓库-->
              <el-table-column show-overflow-tooltip prop="date" label="退回仓库" width="150" />

              <!--退回物料-->
              <el-table-column show-overflow-tooltip prop="name" label="退回物料" />

              <!--物料费用-->
              <el-table-column show-overflow-tooltip prop="state" label="物料费用" width="150" />

              <!--附件-->
              <el-table-column show-overflow-tooltip prop="city" label="附件" width="120" />

              <!--审核-->
              <el-table-column show-overflow-tooltip prop="city" label="审核" width="120" />
            </el-table>
          </div>
          <div class="table-detail">
            <el-table border stripe resizable size="default" :data="tableData2" style="width: 100%">
              <!--入库单号-->
              <el-table-column show-overflow-tooltip prop="name" label="入库单号" width="140">
                <template #default="scope">
                  <span class="number">{{ scope.row.name }}</span>
                </template>
              </el-table-column>

              <!--退回仓库-->
              <el-table-column show-overflow-tooltip prop="date" label="退回仓库" width="120" />

              <!--物流名称-->
              <el-table-column show-overflow-tooltip prop="date" label="物流名称" width="120" />

              <!--物流单号-->
              <el-table-column show-overflow-tooltip prop="state" label="物流单号" width="120" />

              <!--物流备注-->
              <el-table-column show-overflow-tooltip prop="date" label="物流备注" width="120" />

              <!--入库时间-->
              <el-table-column show-overflow-tooltip prop="date" label="入库时间" width="120" />

              <!--入库庄涛-->
              <el-table-column show-overflow-tooltip prop="state" label="入库状态" width="120">
                <template #default="scope">
                  <span class="state">{{ scope.row.state }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <table class="table-j">
            <colgroup>
              <col width="120" />
            </colgroup>
            <tbody>
              <tr>
                <td class="bg-gray"><b>退回收货信息</b></td>
                <td>公司地址 张三 18823235555 广东省佛山市顺德区容桂镇科技创新中心2座2104</td>
              </tr>
            </tbody>
          </table>
          <div class="table-detail">
            <el-table
              :border="true"
              stripe
              resizable
              size="default"
              :data="tableData2"
              style="width: 100%"
            >
              <!--收付款单据编号-->
              <el-table-column show-overflow-tooltip prop="name" label="收付款单据编号" />

              <!--收付类型-->
              <el-table-column show-overflow-tooltip prop="date" label="收付类型" width="120" />

              <!--金额-->
              <el-table-column show-overflow-tooltip prop="date" label="金额" width="80" />

              <!--账户-->
              <el-table-column show-overflow-tooltip prop="state" label="账户" width="120" />

              <!--结算方-->
              <el-table-column show-overflow-tooltip prop="city" label="结算方" width="120" />

              <!--结算时间-->
              <el-table-column show-overflow-tooltip prop="city" label="结算时间" width="170" />
            </el-table>
          </div>
          <div class="table-detail">
            <el-table
              :border="true"
              stripe
              resizable
              size="default"
              :data="tableData2"
              style="width: 100%"
            >
              <!--时间-->
              <el-table-column show-overflow-tooltip prop="name" label="时间" width="170" />

              <!--操作人-->
              <el-table-column show-overflow-tooltip prop="date" label="操作人" width="200" />

              <!--操作事件-->
              <el-table-column show-overflow-tooltip prop="date" label="操作事件" width="200" />

              <!--备注-->
              <el-table-column show-overflow-tooltip prop="state" label="备注" width="120" />
            </el-table>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '../../../../components/Pagination/index.vue'
  import { ref, onMounted, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { Search, RefreshRight } from '@element-plus/icons-vue'
  import { getBackList } from '../../.././../api/parts'
  import { ElMessage } from 'element-plus'
  import DateRange from '@/components/DateRange.vue'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.order.returnOldPart,
  })

  const router = useRouter()
  const value = ref('')
  const input = ref('')
  const detailDialog = ref(false)
  const loading = ref(false)
  const pagination = ref()
  const totalList = ref(0)
  const time = ref('')
  const data = reactive({
    callbackEndTime: '', //旧件退回结束时间
    callbackStartTime: '', //旧件退回开始时间
    limit: 0,
    networkId: null, //部门ID
    oldSpareNo: '', //旧件单号
    page: 0,
    status: null, //	旧件退回状态：1-待退回，2-待确认并填写物流，3-已退回
    workNo: '', //工单单号
    workSpareNo: '', //	工单物料单号
  })
  // 查看工单
  const goOrder = (n: number) => {
    router.push('/order/odetail')
  }
  const option = [
    { name: '待退回', value: 1 },
    { name: '待确认并填写物流', value: 2 },
    { name: '已退回', value: 3 },
  ]
  // 查看物料详细
  const viewDetail = (n: number) => {
    detailDialog.value = true
  }

  const options = [
    {
      value: '全部类型',
    },
    {
      value: '全部品牌',
    },
    {
      value: '全部分类',
    },
  ]

  const tableData = ref(null)
  // 时间变化
  const dateChange = (val) => {
    if (val === null) {
      data.callbackStartTime = ''
      data.callbackEndTime = ''
    } else {
      data.callbackStartTime = val[0]
      data.callbackEndTime = val[1]
    }
    getList()
  }

  const tableData2 = [
    {
      date: '厂家物料',
      name: 'CK2306289143',
      state: '待审核',
      city: '深圳市南山区维修店',
      address: '2023-04-26 11:31:01',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '20230602590500824',
      name: '2016-05-02',
      state: 'California',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
  ]

  // 日期范围组件实例
  const dateRangeRef = ref<InstanceType<typeof DateRange> | null>(null)

  // 开始日期是否大于结束日期
  const isStartDateGreaterThanEndDate = ref(false)

  // 重置
  const onReset = () => {
    if (dateRangeRef.value) {
      dateRangeRef.value.resetDateRange()
      isStartDateGreaterThanEndDate.value = false
    }
    Object.assign(data, {
      callbackEndTime: '', // 旧件退回结束时间
      callbackStartTime: '', // 旧件退回开始时间
      limit: 0,
      networkId: null, // 部门ID
      oldSpareNo: '', // 旧件单号
      page: 0,
      status: null, // 旧件退回状态：1-待退回，2-待确认并填写物流，3-已退回
      workNo: '', // 工单单号
      workSpareNo: '', // 工单物料单号
    })
    getList()
  }

  // 日期更新事件
  const handleDateChange = (param: {
    startDate: string
    endDate: string
    isStartDateGreaterThanEndDate: boolean
  }) => {
    data.callbackStartTime = param.startDate
    data.callbackEndTime = param.endDate
    isStartDateGreaterThanEndDate.value = param.isStartDateGreaterThanEndDate
    if (param.isStartDateGreaterThanEndDate) {
      ElMessage({
        type: 'error',
        message: '开始日期不能大于结束日期',
      })
    }
  }

  async function getList() {
    if (isStartDateGreaterThanEndDate.value) {
      ElMessage({
        type: 'error',
        message: '开始日期不能大于结束日期',
      })
      return
    }
    loading.value = true
    data.page = pagination.value.current
    data.limit = pagination.value.size
    await getBackList(data).then((res) => {
      if (res.data.success) {
        tableData.value = res.data.data.rows
        totalList.value = Number(res.data.data.total)
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 4000,
          offset: 200,
        })
      }
      loading.value = false
    })
  }

  onMounted(() => {
    getList()
  })
</script>

<style scoped lang="scss">
  @import './index';
</style>
